<script>
import { ideaList } from '@/api/constant'
export default {
  name: 'IdeaPage',
  data () {
    return {
      ideaList
    }
  }
}
</script>

<template>
  <div class="idea-page">
    <div class="w">
      <div class="card" v-for="idea in ideaList" :key="idea.title">
        <div class="card-titile">
          {{ idea.title }}
        </div>
        <div class="card-text">
          <dl>
            <template v-for="child in idea.children">
              <dt :key="child.title">{{ child.title }}</dt>
              <dd v-for="detail in child.details" :key="detail">
                {{ detail }}
              </dd>
            </template>
          </dl>
          <p v-for="text in idea.details" :key="text">{{ text }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.idea-page {
  padding: 80px;
  .w {
    box-sizing: border-box;
    margin: 60px 100px;
    .card {
      padding-bottom: 50px;
      .card-titile {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 140px;
        background-color: #414099;
        border-bottom: 20px solid #6f6edf;
        border-radius: 20px 20px 0 0;
        color: #fff;
        font-size: 70px;
        font-weight: normal;
      }
      .card-text {
        dt {
          margin-top: 40px;
          line-height: 2;
          font-size: 56px;
        }
        dd {
          margin-top: 40px;
          line-height: 2;
          font-size: 50px;
          font-weight: 200;
        }
      }
    }
  }
}
</style>
